<template>
  <view>
    <button class="button" type="primary" @click="toggle('right')">
      <text class="button-text">右侧</text>
    </button>
    <!-- 普通弹窗 -->
    <uni-popup ref="popup" background-color="#fff" @change="change">
      <view
        class="popup-content"
        :class="{ 'popup-height': type === 'left' || type === 'right' }"
        ><text class="text">popup 内容</text></view
      >
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: "center",
      msgType: "success",
      messageText: "这是一条成功提示",
      value: "",
    };
  },
  methods: {
    change(e) {
      console.log("当前模式：" + e.type + ",状态：" + e.show);
    },
    toggle(type) {
      this.type = type;
      // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
      this.$refs.popup.open(type);
    },
  },
};
</script>

<style>
.puni-popup__wrapper right{
    width: 100%;
}
</style>